<template>
    <view class="uploadCom">
        <view class="items center" v-for="(item, index) in fileList" :key="index">
            <!-- 图片 -->
            <u-image width="160rpx" height="160rpx" :src="item.displayUrl" @click="onPreviewShow(item, index)" mode="aspectFit"></u-image>

            <!-- 删除 -->
            <u-icon v-if="!readOnly && !disabled" class="delete" color="#e45656" :size="25" name="close-circle-fill" @click.native.stop="onDelete(index)"></u-icon>
        </view>

        <!-- 真上传按钮 -->
        <view class="upload" v-if="!disabled && fileList.length < limit">
            <view class="add" @tap="onChooseImage">
                <u-icon name="plus" :size="40"></u-icon>
            </view>
        </view>
        <view v-if="disabled && !fileList.length"> 暂无文件~ </view>

        <!-- 预览 -->
        <ImgShow :list="previewImgs" keyName="displayUrl" ref="ImgShowRef" @hide="onPreviewHide()"></ImgShow>

        <u-button type="primary" size="small" v-if="!readOnly && !disabled" @click="onSave">保存</u-button>
    </view>
</template>

<script>
import Config from "@/gx/Config";
import gx from "../../gx/gx";
import Enums from "../../gx/Enums";
import apiCore from "@/gx/_base/ApiCore.js";
export default {
    name: "UploadImage",
    data() {
        return {
            fileList: [],
            previewImgs: [], //预览图片的集合
            readOnly: false, //是否只读
        };
    },
    model: {
        //event:什么时候触发v-model行为，对于uni-app，必须写input
        event: "input",
        // 定义传递给v-model的那个变量，绑定到哪个属性值上
        prop: "modelValue",
    },
    props: {
        //对应v-model双向绑定的值
        modelValue: {
            type: Array,
            default() {
                return [];
            },
        },

        //限制上传文件数量
        limit: {
            type: Number,
            default: 9,
        },

        //是否为只能上传图片，此功能暂时处理不了，原因查看onChange方法
        onlyImg: {
            type: Boolean,
            default: false,
        },
        //是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        this.formatFiles();
    },
    watch: {
        modelValue: {
            handler(newVal, oldVal) {
                this.fileList = newVal;
                this.formatFiles();
            },
            immediate: true, //首次加载时就要执行
        },
    },
    methods: {
        //格式化数据，增加一些前端使用到的属性
        formatFiles() {
            for (let i = 0; i < this.modelValue.length; i++) {
                let item = this.modelValue[i];

                if (Config.UploadPosition == Enums.UploadPosition.本地) {
                    item.displayUrl = Config.ApiUrl + item.url;
                } else if (Config.UploadPosition == Enums.UploadPosition.远程) {
                    item.displayUrl = item.url;
                } else {
                    item.displayUrl = "";
                }
            }
        },

        //选择文件触发，返回所有已选择文件Map集合
        onChooseImage() {
            console.log("onChooseImage");
            let that = this;
            uni.chooseImage({
                count: this.limit, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: function (res) {
                    console.log(res);
                    if (Config.UploadPosition == Enums.UploadPosition.本地) {
                        that.$app.Uploads(res.tempFiles).then((files) => {
                            that.onUploadEnd(files);
                        });
                    } else if (Config.UploadPosition == Enums.UploadPosition.远程) {
                        that.$app.UploadQinius(res.tempFiles).then((files) => {
                            that.onUploadEnd(files);
                        });
                    }
                },
            });
        },

        //上传结束
        onUploadEnd(files) {
            for (let i = 0; i < files.length; i++) {
                let item = files[i];

                if (Config.UploadPosition == Enums.UploadPosition.本地) {
                    item.displayUrl = Config.ApiUrl + item.url;
                } else if (Config.UploadPosition == Enums.UploadPosition.远程) {
                    item.displayUrl = item.url;
                }
                this.fileList.push(item);
                this.emitData();
            }
        },

        //删除
        onDelete(index) {
            //TODO:这里删除时不对，当文件上传多个，超过6个时，就算是删除了一个，再点上传也不能上传了。需要把插件换成新版的
            this.fileList.splice(index, 1);
            this.emitData();
            this.$emit("onDelete", index);
        },

        //预览
        onPreviewShow(item, index) {
            //处理预览时，只把图片过滤出来，一次性可以预览完成
            let _list = gx.DeepCopy(this.fileList);

            let res = [];
            let cnt = 0;

            for (let i = 0; i < _list.length; i++) {
                let it = _list[i];
                res.push(it);
            }

            this.previewImgs = res;
            this.readOnly = true;
            this.$refs.ImgShowRef.show(index - cnt);
            this.$emit("onPreviewShow");
        },

        //预览关闭
        onPreviewHide() {
            this.readOnly = false;
            this.$emit("onPreviewHide");
        },

        //回传数据
        emitData() {
            this.$emit("input", this.fileList);
        },

        //设置只读
        setReadOnly(flag) {
            this.readOnly = flag;
        },

        onSave() {
            this.$emit("close", this.fileList);
        },
    },
};
</script>

<style scoped>
.uploadCom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.upload {
    float: left;
    width: 170rpx;
    height: 170rpx;
}

.add {
    width: 160rpx;
    height: 160rpx;
    border: 2rpx dashed #c0ccda;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.items {
    width: 160rpx;
    height: 160rpx;
    margin-right: 15rpx;
    margin-bottom: 15rpx;
    border-radius: 10rpx;
    overflow: hidden;
    position: relative;
    border: 2rpx solid #c0ccda;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
}
</style>
